import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { Menu, Layout } from 'antd'
import { connect } from 'react-redux'
import getRoutes, { routes } from '../../router/routes'
import AuthorManager from '../../utils/authors'

const { SubMenu } = Menu
const { Sider } = Layout

// eslint-disable-next-line

// 根菜单
const rootSubmenuKeys = (() => {
    let rootKeys = []
    routes.forEach(item => {
        if (item.children) {
            rootKeys.push(item.path)
        }
    })
    return rootKeys
})()

class Slide extends Component {
    state = {
        openKeys: [],
        selectedKeys: [],
    }

    componentDidMount () {
        let { location: { pathname } } = this.props
        let arr = pathname.split('/').slice(1, -1).map(item => '/' + item)
        if (sessionStorage.getItem('type') === 'false') {
            const keyArray = JSON.parse(sessionStorage.getItem('author'))
            const Author = new AuthorManager(routes, keyArray)
            Author.getAuthorList()
            console.log(12)
        } else {
            // routes=getRoutes()
            routes.length=0
            routes.push(...getRoutes())
            console.log('root', routes)
        }
        setTimeout(() => {
            this.setState({
                openKeys: arr.map((item, index) => {
                    return arr.slice(0, index + 1).join('')
                })
            })
        }, 700)
        this.setState({
            selectedKeys: [pathname],
        })
    }

    componentDidUpdate (prevProps, prevState, snapshot) {
        let { location: { pathname: lastPath } } = prevProps
        let { location: { pathname: currentPath } } = this.props
        let arr = currentPath.split('/').slice(1, -1).map(item => '/' + item)
        let openKeys = arr.map((item, index) => {
            return arr.slice(0, index + 1).join('')
        })
        // console.log('openKeys=>',openKeys)
        // console.log(openKeys)
        if (lastPath !== currentPath) {
            // console.log('根据路由变化=>同步展开菜单')
            this.setState({
                selectedKeys: [currentPath],
                openKeys
            })
        }
    }

    componentWillUnmount () {
        console.log('卸载')
    }

    renderSlide (routes) {
        return routes.map((item) => {
            if (!item.children) {
                return <Menu.Item icon={item.icon} key={item.path}>{item.title}</Menu.Item>
            } else {
                return (<SubMenu key={item.path} icon={item.icon} title={item.title}>
                    {this.renderSlide(item.children)}
                </SubMenu>)
            }
        })
    }

    onSelect ({ key }) {
        console.log(key)
        this.props.auto(key)
        setTimeout(() => {
            this.props.history.push(key)
        }, 400)
        this.setState({
            selectedKeys: key
        })
    }

    onOpenChange (keys) {
        const latestOpenKey = keys.slice(-1).join('')
        if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            this.setState({
                openKeys: keys
            })
        } else {
            this.setState(latestOpenKey ? {
                openKeys: [latestOpenKey]
            } : {
                openKeys: []
            })
        }
    };

    render () {
        return (
            <Sider collapsed={!this.props.open} width={230} style={{ height: '100vh !important', overflow: 'auto' }}>
                <div className="logo">
                    <img src="https://chengqige.com/svg/leetcode.png" width="32" height="32" alt=""/>
                    <div className="title">运动服装专卖店</div>
                </div>
                <Menu mode="inline" theme="dark"
                      openKeys=
                          {this.state.openKeys}
                      selectedKeys={this.state.selectedKeys}
                      onOpenChange=
                          {this.onOpenChange.bind(this)}
                      onSelect={this.onSelect.bind(this)}
                >
                    {this.renderSlide(routes)}
                </Menu>
            </Sider>
        )
    }
}

export default connect((state) => {
    return {
        open: state.getIn(['slide', 'open'])
    }
}, (dispatch) => {
    return {
        auto: (key) => {
            dispatch({ type: 'auto', value: key })
        }
    }
})(withRouter(Slide))
